<template>
	<view class="content">
		<view class="item" v-for="(item,id) in list" :key="id">
			<view>
				<view class="line-radio" :style="{ 'background' : item.istrue ? '#559DFF' : '#AFB8C4'}"></view>
			</view>
			<view class="right-box" :class="{istrue: item.istrue}" :style="{'color' : item.istrue ? '#559DFF' : '#333333'}">
				<text>{{item.title}}{{item.status}}</text>
				<text>{{item.time}}</text>
				<text>{{item.opinions}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'UniTimeLine',
		props: {

		},
		data() {
			return {
				list: [
					{
						title: '灵安社区：沈佳佳',
						opinions: '',
						status: "待处理",
						time: '2023-05-19 14:03',
						istrue: true,
					}, {
						title: '数智中心',
						opinions: '受理意见：请灵安社区于五个工作日内对破损路面进行维修。',
						status: '已受理',
						time: '2023-05-19 14:03',
						istrue: false,
					}, {
						title: '',
						opinions: '待受理',
						status: '待受理',
						time: '2023-05-19 13:57',
						istrue: false,
					}
				]
			}
		},
		watch: {
			title(newVal) {
				if (uni.report && newVal !== '') {
					uni.report('title', newVal)
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		margin: 30rpx;
	}
	.item {
		display: flex;
	}
	
	.line-for {
		width: 3rpx;
		height: 24rpx;
		margin: 0 20rpx 10rpx;
		background-color: #559DFF;
	}
	
	.line-radio {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}
	
	.right-box {
		display: flex;
		flex-direction: column;
		margin-left: -16rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		border-left: 2rpx dashed  #AFB8C4;
		text {
			margin-bottom: 5rpx;
		}
		&.istrue {
			border-left: 2rpx dashed  #559DFF;
		}
	}
</style>